<template>
    <div class='Login'>
        <popup :show.sync="show" height="100%" class="popup-dialog">
            <div class="popup1">
                <group>
                    <div class='login-module'>
                        <div class="login-title">加入</div>
                        <div class="login-phone">
                            <p class="login-text">备注名(选填)</p>
                            <div>
                                <x-input type="text" :show-clear=true placeholder="请输入备注名" :value.sync="nickName" class='sloth-input'></x-input>
                            </div>
                        </div>
                        <div class="login-verifycode">
                            <p class="login-text">备注信息(选填)</p>
                            <div>
                                <x-input text-align='left' type="text" :show-clear=false placeholder="请输入备注信息" :value.sync="remarkInfo" class='sloth-input'></x-input>
                            </div>
                        </div>
                        <button @click="join" class="login-button">确认加入</button>
                        <span class="login-close" @click='joinClose'><icon type="clear"></icon></span>
                    </div>
                </group>
            </div>
        </popup>
    </div>
</template>

<script>
import Group from 'vux-components/group'
import XInput from 'vux-components/x-input'
import Popup from 'vux-components/popup'
import Icon from 'vux-components/icon'
import { PostMemberService } from '../../../services/postmember'
import Toast from '../Toast/index.js'
const post = new PostMemberService()

export default {
    replace: true,
    components: {
        Group,
        Popup,
        XInput,
        Icon
    },
    props: {
        show: Boolean,
        id: String
    },
    data() {
        return {
            nickName:'',
            remarkInfo: '',
        }
    },
    methods: {
        async join(){
            let data = await post.Join({id:this.id,nickName:this.nickName,remark:this.remarkInfo,invitationCode:''}).then(()=>{
                this.joinClose()
                window.location.reload()
            }).catch((e)=>{
                if ( e.info && e.info.error ) {
                    Toast.show(e.info.error.message, 'warn')
                    return
                }
                throw e
            })
        },
        joinClose(){
            this.$parent.hidden();
        }
    },
    ready(){
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /*login module*/
@import './Join.scss';
</style>
